<template>
  <div class="index">
    <div class="head bkg-color">
      <div :class="isCollapse ? 'head-logo-small' : 'head-logo-big'"></div>
      <div class="head-left">光伏发电工程技术经济性分析平台</div>
    </div>
    <div class="head-right">
      <div style="margin-right: 5px; display: flex; align-items: center">
        <span>{{ calcModeTreeMap[calcMode] }}</span>
      </div>
      <el-dropdown trigger="click">
        <span>
          <el-avatar style="background-color: #f2f6fc">
            <el-icon style="font-size: 26px">
              <Avatar style="color: #79bbff" />
            </el-icon>
          </el-avatar>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="userInfoDialog = true">个人信息</el-dropdown-item>
            <el-dropdown-item divided>
              <span style="display: flex; width: 100%; justify-content: center" @click="logout">
                登出
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div style="display: flex; height: calc(100vh - 70px); flex-direction: row">
      <div class="nbar bkg-color" :style="isCollapse ? '' : 'width: 200px'">
        <el-scrollbar :height="'calc(100vh - 70px)'">
          <div @click="isCollapse = !isCollapse" class="nbar-logo">
            <span v-show="!isCollapse">菜单</span>
            <el-icon v-if="!isCollapse" color="0xffffff">
              <Fold />
            </el-icon>
            <el-icon v-else>
              <Expand />
            </el-icon>
          </div>
          <el-menu :collapse="isCollapse">
            <el-sub-menu v-for="(item, idx) in menuList" :key="idx" :index="item.index">
              <template #title>
                <el-icon>
                  <EditPen v-if="item.icon == 'editPen'" />
                  <Document v-if="item.icon == 'document'" />
                  <DataLine v-if="item.icon == 'dataLine'" />
                  <MessageBox v-if="item.icon == 'messageBox'" />
                  <Warning v-if="item.icon == 'warning'" />
                </el-icon>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item v-for="(subItem, subIdx) in item.subList" :key="subIdx"
                :index="item.index + '-' + subItem.index" @click="handle(item.index, subItem.index)">
                <div class="nbar-title">
                  <el-icon>
                    <EditPen v-if="subItem.icon == 'editPen'" />
                    <Document v-if="subItem.icon == 'document'" />
                    <DataLine v-if="subItem.icon == 'dataLine'" />
                    <MessageBox v-if="subItem.icon == 'messageBox'" />
                    <Warning v-if="subItem.icon == 'warning'" />
                  </el-icon>
                  {{ subItem.name }}
                </div>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="main bkg-color" :style="
        isCollapse
          ? 'width: calc(100vw - 71px)'
          : 'width: calc(100vw - 200px)'
      ">
        <el-scrollbar :height="'calc(100vh - 70px)'">
          <div class="tool-bar">
            <el-collapse>
              <el-collapse-item>
                <div>
                  <el-tooltip effect="light" content="新建工程" placement="bottom">
                    <el-button :icon="Document" @click="calcModeDialog = true">新建工程</el-button>
                  </el-tooltip>
                  <el-tooltip effect="light" content="打开工程" placement="bottom">
                    <el-button :icon="DocumentAdd" @click="openProjectList">打开工程</el-button>
                  </el-tooltip>
                  <el-tooltip effect="light" content="保存" placement="bottom">
                    <el-button :icon="DocumentChecked" @click="saveProjectOpenDialog">保存</el-button>
                  </el-tooltip>
                  <el-tooltip effect="light" content="另存为" placement="bottom">
                    <el-button :icon="DocumentCopy" @click="saveProjectDialog = true">另存为</el-button>
                  </el-tooltip>
                  <el-divider direction="vertical" />

                  <el-popover trigger="hover" placement="bottom" :width="240">
                    <template #reference>
                      <el-button :icon="Download">导出</el-button>
                    </template>
                    <template #default>
                      <div style="display: flex; flex-direction: row;">
                        <el-tooltip effect="light" content="导出Excel" placement="bottom">
                          <el-button :icon="Download" @click="download('excel')">导出Excel</el-button>
                        </el-tooltip>
                        <el-tooltip effect="light" content="导出Word" placement="bottom">
                          <el-button :icon="Download" @click="download('word')">导出Word</el-button>
                        </el-tooltip>
                      </div>
                    </template>
                  </el-popover>

                  <el-divider direction="vertical" />
                  <el-tooltip effect="light" content="工程信息" placement="bottom">
                    <el-button :icon="Postcard" @click="infoProjectDialog = true">工程信息</el-button>
                  </el-tooltip>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <!-- <div class="go" v-show="isIndex">
            <div @click="go(0)">新建项目</div>
            <div @click="go(1)">收购项目</div>
          </div> -->
          <router-view :key="key"></router-view>
          <!-- <router-view></router-view> -->
        </el-scrollbar>
      </div>
    </div>
  </div>

  <el-dialog v-model="calcModeDialog" title="请选择新建项目类型" width="400px" :show-close="false" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-tree-select v-model="calcMode" :data="calcModeTree" :render-after-expand="false" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="calcModeDialog = false">取消</el-button>
        <el-button type="primary" @click="selectMode"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="openProjectDialog" title="打开工程" width="400px">
    <div style="display: flex; flex-direction: column">
      <div v-for="(item, idx) in projectList" :key="idx">
        <el-button type="primary" text @click="openProject(item)" style="width: 80%">{{ item.title }}</el-button>
        <el-link type="danger" @click="delProject(item.id)" style="width: 20%">删除</el-link>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="openProjectDialog = false">取消</el-button>
        <el-button type="primary" @click="openProjectCommit" :disabled="!selected"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="saveProjectDialog" title="保存工程" width="400px">
    <el-input v-model="saveProjectTitle" placeholder="请输入文件名">
      <template #prepend>文件名</template>
    </el-input>
    <div style="height: 5px"></div>
    <el-input v-model="saveProjectDescription" placeholder="请输入备注(可以为空)">
      <template #prepend>备注</template>
    </el-input>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveProjectDialog = false">取消</el-button>
        <el-button type="primary" @click="saveProjectCommit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="infoProjectDialog" title="工程信息" width="500px">
    <div style="display: flex; flex-direction: column; align-items: flex-start">
      <div>文件名:{{ selectProject.title }}</div>
      <div>备注:{{ selectProject.description }}</div>
      <div>创建时间:{{ selectProject.createTime }}</div>
      <div>最后修改时间:{{ selectProject.modifyTime }}</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="infoProjectDialog = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <div class="user-info">
    <el-dialog v-model="userInfoDialog" :show-close="false" width="350px" :modal="false" top="20vh"
      style="opacity: 0.7">
      <el-card :body-style="{ 'padding-top': '20px' }">
        <img src="../assets/logo-small.png" style="width: 200px;" />
        <div style="padding-left: 10px">
          <div>账号: {{ userInfo.userName }}</div>
          <div>姓名: {{ userInfo.name }}</div>
        </div>
        <div style="margin: 5px;padding-left: 30px;padding-right: 30px;">
          <div>
            <el-input v-model="userInfoTemp.name" placeholder="新姓名,不修改勿输入">
              <template #prepend>姓名</template>
            </el-input>
            <div style="height: 3px;"></div>
            <el-input v-model="userInfoTemp.passwd" placeholder="新密码,不修改勿输入">
              <template #prepend>密码</template>
            </el-input>
          </div>
          <div style="margin: 5px;margin-top: 10px;">
            <el-button text bg @click="userInfoDialog = false"> 关闭 </el-button>
            <el-button text bg @click="userInfoUpdate"> 更新 </el-button>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>

  <el-dialog v-model="isDownloadWord" title="下载类型" width="250px">
    <el-select v-model="downloadWordType" placeholder="Select">
      <el-option label="集中式" value="centralized" />
      <el-option label="集团分布式" value="distributed-jituan" />
      <el-option label="国华分布式" value="distributed-guohua" />
    </el-select>
    <div style="display: flex;padding-top: 10px;">
      <el-button style="width: 50%" @click="isDownloadWord = false">取消</el-button>
      <el-button style="width: 50%" type="success" @click="downloadWord">确定</el-button>
    </div>
  </el-dialog>

</template>

<script setup>
import { onMounted, onUnmounted } from "@vue/runtime-core";
import { ref, toRefs, computed } from "@vue/reactivity";
import menuList from "../nbar/menu.js";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
import { useRoute, useRouter } from "vue-router";
import { ElMessageBox } from 'element-plus'
import {
  Document,
  DocumentAdd,
  DocumentChecked,
  DocumentCopy,
  DocumentDelete,
  TrendCharts,
  Setting,
  Download,
  SetUp,
  Tickets,
  MessageBox,
  Warning,
  Postcard,
} from "@element-plus/icons-vue";
import { raw_data } from "../tableData/data.js";
import allParams from "../utils/sendParams.js";
import formatParams from "../utils/getParams.js";
import {
  apiGenerate,
  apiGenerateWord,
  apiDownload,
  apiProjectList,
  apiProjectById,
  apiProjectSave,
  apiProjectUpdate,
  apiProjectDel,
  apiUserUpdate
} from "../apis/apis.js";

const raw_data_ref = ref(raw_data);
console.log(raw_data_ref);

const router = useRouter();
const route = useRoute();

const key = computed(() => {
  console.log(route.name + Number(new Date()));
  return route.name + Number(new Date());
});

const userInfoDialog = ref(false)
const userInfo = ref(JSON.parse(Cookies.get("user")))
const userInfoTemp = ref({
  name: "",
  passwd: ""
})
const userInfoUpdate = () => {
  if (userInfoTemp.value.name === "" && userInfoTemp.value.passwd === "") {
    userInfoDialog.value = false;
    return;
  }
  console.log({
    id: userInfo.value.id,
    name: userInfoTemp.value.name === "" ? userInfo.value.name : userInfoTemp.value.name,
    passwd: userInfoTemp.value.passwd === "" ? 'unvisible' : userInfoTemp.value.passwd,
    userName: userInfo.value.userName
  })
  apiUserUpdate({
    id: userInfo.value.id,
    name: userInfoTemp.value.name === "" ? userInfo.value.name : userInfoTemp.value.name,
    passwd: userInfoTemp.value.passwd === "" ? userInfo.value.passwd : userInfoTemp.value.passwd,
    userName: userInfo.value.userName
  }).then((res) => {
    console.log("OK ", res);
    if (res.code === 200) {
      ElMessage({
        message: "更新成功",
        grouping: true,
        type: "success",
      });
      userInfo.value.name = userInfoTemp.value.name
      if (userInfoTemp.value.passwd !== "") {
        logout()
      }
      userInfoDialog.value = false;
    } else {
      ElMessage({
        message: "更新失败",
        grouping: true,
        type: "error",
      });
    }
  })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "更新失败",
        grouping: true,
        type: "error",
      });
    });
}


const infoProjectDialog = ref(false);

const newProject = ref(true);
const openProjectDialog = ref(false);
const projectList = ref([]);
const selected = ref(false)
const openProjectList = () => {
  selected.value = false;
  apiProjectList({})
    .then((res) => {
      console.log("OK ", res);
      projectList.value = res.obj;
      openProjectDialog.value = true;
    })
    .catch((res) => {
      console.log("ERROR ", res);
    });
};
const selectProject = ref({
  title: "新建工程",
  description: "",
  createTime: new Date(),
  modifyTime: new Date(),
});
const openProject = (project) => {
  console.log(project);
  selectProject.value = project;
  selected.value = true;
};

const openProjectCommit = () => {
  if (projectList.value.length === 0) {
    openProjectDialog.value = false;
    return;
  }
  apiProjectById({ id: selectProject.value.id })
    .then((res) => {
      console.log("OK ", res);
      // console.log(formatParams);
      selectProject.value = res.obj
      formatParams(raw_data_ref.value, res.obj.dataInput);
      ElMessage({
        message: "打开成功",
        grouping: true,
        type: "success",
      });
      newProject.value = false;
      openProjectDialog.value = false;
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "打开失败",
        type: "error",
        grouping: true,
      });
    });
};

const saveProjectDialog = ref(false);
const saveProjectTitle = ref("");
const saveProjectDescription = ref("");
const saveProjectOpenDialog = () => {
  if (newProject.value === false) {
    if (selectProject.value === null) {
      ElMessage({
        message: "保存失败",
        grouping: true,
        type: "error",
      });
      selectProject.value = {
        title: "新建工程",
        description: "",
        createTime: new Date(),
        modifyTime: new Date(),
      }
      return;
    }
    selectProject.value.dataInput = allParams(raw_data_ref.value);
    apiProjectUpdate(selectProject.value)
      .then((res) => {
        console.log("OK ", res);
        ElMessage({
          message: "保存成功",
          grouping: true,
          type: "success",
        });
        selectProject.value = res.obj
        if (newProject.value = true) {
          newProject.value = false;
        }
      })
      .catch((res) => {
        console.log("ERROR ", res);
        ElMessage({
          message: "保存失败",
          grouping: true,
          type: "error",
        });
      });
  } else {
    saveProjectDialog.value = true;
  }
};
const saveProjectCommit = () => {
  if (saveProjectTitle.value === "") {
    ElMessage({
      message: "请输入文件名",
      grouping: true,
      type: "error",
    });
    return;
  }
  apiProjectSave({
    createTime: "",
    dataInput: allParams(raw_data_ref.value),
    description: saveProjectDescription.value,
    id: "",
    modifyTime: "",
    title: saveProjectTitle.value,
    userId: ""
  })
    .then((res) => {
      console.log("OK ", res);
      ElMessage({
        message: "保存成功",
        grouping: true,
        type: "success",
      });
      selectProject.value = res.obj
      if (newProject.value = true) {
        newProject.value = false;
      }
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "保存失败",
        grouping: true,
        type: "error",
      });
    });

  saveProjectDialog.value = false;
};

const delProject = (pid) => {
  apiProjectDel({ id: pid })
    .then((res) => {
      console.log("OK ", res);
      ElMessage({
        message: "删除成功",
        grouping: true,
        type: "success",
      });
      openProjectDialog.value = false;
      if (pid === selectProject.value.id) {
        calcModeDialog.value = true;
        newProject.value = true;
      }
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "删除失败",
        grouping: true,
        type: "error",
      });
    });
};
const downloadExcel = () => {
  // console.log(allParams(raw_data_ref.value))
  apiGenerate(allParams(raw_data_ref.value))
    .then((res) => {
      console.log("OK ", res);
      if (res.code === 200) {
        var fname = res.obj;
        apiDownload(fname)
          .then((res) => {
            console.log("OK ", res);
            const blob = new Blob([res], {
              type: "application/octet-stream",
            });
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = fname;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
            ElMessage({
              message: "下载成功",
              grouping: true,
              type: "success",
            });
          })
          .catch((res) => {
            console.log("ERROR ", res);
          });
      } else {
        ElMessage({
          message: "生成失败",
          grouping: true,
          type: "error",
        });
      }
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "生成失败 请检查参数是否正确",
        grouping: true,
        type: "error",
      });
    });
};

const isDownloadWord = ref(false)
const downloadWordType = ref("centralized")
const downloadWord = () => {
  console.log("downloadWord", downloadWordType.value)
  ElMessage({
    message: "正在生成,请等待...",
    grouping: true,
    type: "warning",
  });
  apiGenerateWord(allParams(raw_data_ref.value), downloadWordType.value)
    .then((res) => {
      console.log("OK ", res);
      if (res.code === 200) {
        var fname = res.obj;
        apiDownload(fname)
          .then((res) => {
            console.log("OK ", res);
            const blob = new Blob([res], {
              type: "application/octet-stream",
            });
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob);
            downloadElement.href = href;
            downloadElement.download = fname;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(href);
            ElMessage({
              message: "下载成功",
              grouping: true,
              type: "success",
            });
            isDownloadWord.value = false
          })
          .catch((res) => {
            console.log("ERROR ", res);
          });
      } else {
        ElMessage({
          message: "生成失败",
          grouping: true,
          type: "error",
        });
      }
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "生成失败 请检查参数是否正确",
        grouping: true,
        type: "error",
      });
    });
}

const download = (type) => {
  if (type === "excel") {
    return downloadExcel()
  } else if (type === "word") {
    isDownloadWord.value = true
    // return downloadWord()
  }
}

const isCollapse = ref(false);
const calcMode = ref(Cookies.get("calcMode") || "");
const calcModeDialog = ref(
  calcMode.value === "" ||
    calcMode.value === null ||
    calcMode.value === undefined
    ? true
    : false
);
const calcModeTreeMap = ref({
  1: "集团标准",
  "2-1-1": "国华投资标准/分布式光伏/屋顶分布式",
  "2-1-2": "国华投资标准/分布式光伏/地面分布式",
  "2-2": "国华投资标准/集中式光伏",
});
const calcModeTree = ref([
  {
    value: "1",
    label: "集团标准",
  },
  {
    value: "2",
    label: "国华投资标准",
    children: [
      {
        value: "2-1",
        label: "分布式光伏",
        children: [
          {
            value: "2-1-1",
            label: "屋顶分布式",
          },
          {
            value: "2-1-2",
            label: "地面分布式",
          },
        ],
      },
      {
        value: "2-2",
        label: "集中式光伏",
      },
    ],
  },
]);

const selectMode = () => {
  if (calcMode.value === "") {
    ElMessage({
      message: "请选择模式",
      type: "error",
      grouping: true,
    });
  } else {
    Cookies.set("calcMode", calcMode.value);
    console.log(calcMode.value);
    let mode = {
      1: "6383827b3c51ff5dc979dc6c",
      "2-1-1": "638382193c51ff5dc979dc6b",
      "2-1-2": "638382973c51ff5dc979dc6d",
      "2-2": "638381ea3c51ff5dc979dc6a",
    }[calcMode.value];
    console.log(mode);
    apiProjectById({ id: mode })
      .then((res) => {
        console.log("OK ", res);
        // console.log(formatParams);
        selectProject.value = {
          title: "新建工程",
          description: "",
          createTime: new Date(),
          modifyTime: new Date(),
        };
        formatParams(raw_data_ref.value, res.obj.dataInput);
        newProject.value = true;
        ElMessage({
          message: "新建工程成功",
          type: "success",
          grouping: true,
        });
        calcModeDialog.value = false;
      })
      .catch((res) => {
        console.log("ERROR ", res);
        ElMessage({
          message: "新建工程失败",
          type: "error",
          grouping: true,
        });
      });
  }
};

const handle = (a, b) => {
  console.log(" ?--- >", a, b);
  if (a == 1) {
    router.push({ name: "table", params: { name: a + "-" + b } });
  }
  if (a == 2) {
    console.log("report...");
    router.push("/index/report/" + b);
  }
  if (a == 3) {
    console.log("eva...");
    router.push("/index/eva");
  }
  if (a == 4) {
    console.log("analysis...");
    router.push("/index/analysis/" + b);
  }
  if (a == 5) {
    console.log("graph...");
    router.push("/index/graph/" + b);
  }
};

const logout = () => {
  Cookies.remove("userid");
  Cookies.remove("user");
  Cookies.remove("calcMode");
  console.log("logout...");
  router.push("/login");
};


const beforeunloadHandler = (e) => {
  if (e) {
    e = e || window.event;
    console.log(e);
    if (e) {
      e.returnValue = "请确保已经保存工程";
    }
    return "关闭提示";
  }
}

onMounted(() => {
  console.log(" Index onMounted : ", route.params);
  window.addEventListener("beforeunload", (e) => beforeunloadHandler(e));
});


onUnmounted(() => {
  window.removeEventListener("beforeunload", (e) =>
    this.beforeunloadHandler(e)
  );
})
</script>

<style>
.bkg-color {
  background-image: linear-gradient(45deg,
      hsl(214deg 100% 97%) 0%,
      hsl(214deg 99% 97%) 5%,
      hsl(214deg 99% 96%) 10%,
      hsl(214deg 99% 96%) 14%,
      hsl(214deg 98% 96%) 19%,
      hsl(214deg 98% 96%) 24%,
      hsl(214deg 97% 96%) 29%,
      hsl(214deg 97% 95%) 33%,
      hsl(214deg 97% 95%) 38%,
      hsl(214deg 97% 95%) 43%,
      hsl(214deg 96% 95%) 48%,
      hsl(214deg 96% 95%) 52%,
      hsl(214deg 96% 95%) 57%,
      hsl(214deg 96% 94%) 62%,
      hsl(214deg 96% 94%) 67%,
      hsl(214deg 95% 94%) 71%,
      hsl(214deg 95% 94%) 76%,
      hsl(214deg 95% 94%) 81%,
      hsl(214deg 95% 93%) 86%,
      hsl(214deg 95% 93%) 90%,
      hsl(214deg 95% 93%) 95%,
      hsl(214deg 95% 93%) 100%);
}

.index {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  height: 70px;

  display: flex;
  align-items: center;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: grey;
  box-shadow: 1px 1px 10px #059669;
  z-index: 999;
}

.head-logo-small {
  width: 69px;
  height: 69px;
  background-image: url("../assets/logo-small.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.head-logo-big {
  width: 196px;
  height: 69px;
  background-image: url("../assets/logo-big.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 80px;
  margin-left: 1px;
}

.head-left {
  font-size: 28px;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 90%;
}

.head-right {
  margin-right: 30px;
  display: flex;
  position: absolute;
  z-index: 999;
  right: 0px;
  top: 13px;
}

.head-right:hover {
  cursor: pointer;
}

.nbar {
  min-width: 70px;
  height: 100%;
  border-right-width: 1px;
  border-right-style: dashed;
  border-right-color: lightgray;
  overflow: auto;
}

.main {
  height: 100%;
}

.nbar-title {
  font-size: 12px;
  white-space: pre-wrap;
  line-height: 20px;
  text-align: left;
}

.index .el-menu {
  border: none;
  background-image: linear-gradient(45deg,
      hsl(214deg 100% 97%) 0%,
      hsl(214deg 99% 97%) 5%,
      hsl(214deg 99% 96%) 10%,
      hsl(214deg 99% 96%) 14%,
      hsl(214deg 98% 96%) 19%,
      hsl(214deg 98% 96%) 24%,
      hsl(214deg 97% 96%) 29%,
      hsl(214deg 97% 95%) 33%,
      hsl(214deg 97% 95%) 38%,
      hsl(214deg 97% 95%) 43%,
      hsl(214deg 96% 95%) 48%,
      hsl(214deg 96% 95%) 52%,
      hsl(214deg 96% 95%) 57%,
      hsl(214deg 96% 94%) 62%,
      hsl(214deg 96% 94%) 67%,
      hsl(214deg 95% 94%) 71%,
      hsl(214deg 95% 94%) 76%,
      hsl(214deg 95% 94%) 81%,
      hsl(214deg 95% 93%) 86%,
      hsl(214deg 95% 93%) 90%,
      hsl(214deg 95% 93%) 95%,
      hsl(214deg 95% 93%) 100%);
}

.nbar-logo {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}

.nbar-logo:hover {
  cursor: pointer;
  color: #409eff;
}

.go {
  width: 100%;
  height: calc(100vh - 170px);
  margin: 50px auto;
  display: flex;
}

.go div {
  width: 40%;
  /* height: 80%; */
  background-color: white;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;

  border-radius: 2px;
}

.go div:hover {
  box-shadow: 2px 2px 10px grey;
  cursor: pointer;
}

.tool-bar .el-collapse-item__content {
  padding-bottom: 0;
}

.tool-bar .el-collapse {
  border: none;
}

.tool-bar .el-collapse-item__header {
  height: 10px;
  background-color: unset;
  border: none;
  display: flex;
  justify-content: center;
  font-size: 18px;
  margin: 10px;
}

.tool-bar .el-collapse-item__wrap {
  background-color: unset;
  border: none;
}

.tool-bar .el-collapse-item__arrow {
  margin: 0;
  transform: rotate(90deg);
}

.tool-bar .el-collapse-item__arrow.is-active {
  color: #059669;
}

.user-info .el-dialog__header {
  padding: 0;
}

.user-info .el-dialog__body {
  padding: 0;
}
</style>